<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>G6Flow 流程设计器演示</title>
		<link type="text/css" rel="styleSheet" href="css/G6Flow.css" />
	</head>
	<body>
		<div style="width: 100%;height: 600px;">
			<div style="float: left;width: 120px;margin-right: 20px;">
				<div class="node" type="start" data-value="开始"></div>
				<div class="node" type="operate"></div>
				<div class="node" type="nodeIf" data-value="如果"></div>
				<div class="node" type="end" data-value="结束" data-key="yes" data-name="over"></div>
				<div class="node" type="test"></div>
				<div class="node" type="tt2"></div>
			</div>
			<div style="float: left;width: 60%;border: 1px solid #CCCCCC;">
				<div id="mountNode"></div>
			</div>
		</div>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/g6.min.js"></script>
		<script src="js/G6Flow.js"></script>
		<script>
			var nodeType = new G6Flow.NodeType();
			nodeType.registerType({
				type: 'tt2',
				model: {
					label: 'tt2',
					type: 'rect'
				}
			})
			
			var flow = new G6Flow.Flow({
				container: 'mountNode'
			}, {
				nodeType: nodeType
			});
			
			flow.getNodeTypeHelper().registerEvent('end', 'click', function(info) {
				console.log(info)
			})
			flow.getNodeTypeHelper().registerEvent('end', 'dbclick', function(info) {
				console.log(info)
			})
			flow.getNodeTypeHelper().registerEvent('end', 'mouseover', function(info) {
				console.log(info)
			})
			flow.getNodeTypeHelper().registerEvent('end', 'mouseout', function(info) {
				console.log(info)
			})
			flow.registerTimingEvent('afteradditem', function(evt) {
				console.log('after',evt)
			})
			
			$('body').append('<div class="node" type="operate" data-value="ok"></div>');
			nodeType.render('operate')
		</script>
	</body>
</html>
